<template>
    <div>
<div class="wrapper tag-item"> 
   <div class="fl left-list"> 

    <div class="job-position"> 
     <div class="job-type reco-job"> 
      <div class="head"> 
       <h4 class="title pull-left">推荐职位</h4> 
       <span class="more pull-right"><a href="#">更多职位推荐&nbsp;&nbsp;<i class="fa fa-angle-right" aria-hidden="true"></i></a></span> 
       <div class="clearfix"></div> 
      </div> 
      <ul class="yui3-g job-list" style="display:block;"> 
        <li class="yui3-u-1-2 job-item" v-for="(item,index) in recommendList" :key="index"> 
                <p><span class="name">
                    <router-link :to="`/recruit/item/${item.id}`">
                     {{item.jobname}}
                    </router-link>
                    </span>
                    <span class="city">
                        <i class="fa fa-map-marker"></i>{{item.address}}</span>
                </p> 
                <p class="need"><span class="money">{{item.salary}}</span>{{item.condition}}</p> <p>
                    <span class="company">{{item.eid}} &middot; {{item.createtime}}</span>
                </p> 
        </li> 
       </ul> 
     </div> 
     <div class="job-type latest-job"> 
      <div class="head"> 
       <h4 class="title pull-left">最新职位</h4> 
       <span class="more pull-right"><a href="#">更多职位推荐&nbsp;&nbsp;<i class="fa fa-angle-right" aria-hidden="true"></i></a></span> 
       <div class="clearfix"></div> 
      </div> 
      <ul class="yui3-g job-list" style="display:block;"> 
       <li class="yui3-u-1-2 job-item" v-for="(item1 ,index) in newList" :key="index"> 
            <p>
                <span class="name"> 
                    <router-link :to="`/recruit/item/${item1.id}`">
                     {{item1.jobname}}
                    </router-link>
                </span>
                <span class="city">
                    <i class="fa fa-map-marker"></i>{{item1.address}}
                </span>
            </p> 
            <p class="need">
                <span class="money">{{item1.salary}}</span>
                {{item1.condition}}
            </p> <p><span class="company">{{item1.eid}} &middot; {{item1.createtime}}</span></p> 
        </li> 
      </ul> 
     </div> 
    </div> 
   </div> 
   <div class="fl right-tag"> 
    <div class="hot-company"> 
     <p class="mail">提交收录请发邮件至ccccccc@qq.com</p> 
     <div class="company"> 
      <div class="head"> 
       <h4>热门企业</h4> 
      </div> 
      <ul class="yui3-g company" style="display:block;"> 
         <li class="yui3-u-1-3 company-item" v-for="(item2,index) in hotlist" :key="index"> 
             <p><img :src="item2.logo" alt="" /></p>
             <p class="title">{{item2.name}}</p> 
             <p class="position"><a href="~/assets/recruit-company.html" target="_blank">{{item2.jobcount}}个职位</a></p> 
        </li> 
      </ul> 
     </div> 
    </div> 
   </div> 
   <div class="clearfix"></div> 
  </div> 
    </div>
</template>

<script>
import "~/assets/css/page-sj-recruit-index.css"
import recruitApi from "~/api/recruit"
import enterpriseApi from "~/api/enterprise"
import axios from "axios"
export default {
    //异步获取数据，渲染页面
    asyncData() {
        //发送并发查询，获取最新职位列表，推荐职位列表，热门的企业列表
        // return recruitApi.newList().then( res=> {
        //     return {
        //         newList : res.data.data
        //     }
        // })
        //all函数接收一个数组（全部的调用的方法）
        return axios.all([recruitApi.newList(), recruitApi.recommend(),enterpriseApi.hotlist()])
        //axios的spread：接收一个方法（参数的列表：上边api接口的返回值） 
        .then(axios.spread(function (res1,res2,res3) {
            // 两个请求现在都执行完成
            return  {
                newList:  res1.data.data,  //最新职位列表
                recommendList: res2.data.data, //推荐职位列表
                hotlist: res3.data.data       //热门企业列表
            }
        }));
    }
}
</script>

<style>

</style>
